<template>
  <page-layout>
    <div slot="headerContent">
      <div>{{ $t('overview') }}</div>
    </div>
    <template slot="extra">


    </template>
    <template>
      <div class="analysis">
        <a-row style="margin-top: 0" :gutter="[24, 24]">
          <a-col :sm="24" :md="12" :xl="12">
            <chart-card
                :loading="loading"
                title="账户数量"
                :total="userTotal"
            >
              <a-tooltip title="账户数量" slot="action">
                <a-icon type="info-circle-o"/>
              </a-tooltip>
              <div>
                <mini-area/>
              </div>
            </chart-card>
          </a-col>
          <a-col :sm="24" :md="12" :xl="12">
            <chart-card
                :loading="loading"
                title="资产数量"
                :total="assetTotal"
            >
              <a-tooltip title="资产数量" slot="action">
                <a-icon type="info-circle-o"/>
              </a-tooltip>
              <div>
                <mini-bar/>
              </div>
            </chart-card>
          </a-col>
        </a-row>
        <a-card
            :loading="loading"
            style="margin-top: 24px"
            :bordered="false"
            :body-style="{ padding: '24px' }"
        >

        </a-card>
      </div>
    </template>
  </page-layout>
</template>

<script>
import PageLayout from "@/layouts/PageLayout";
import ChartCard from "../../components/card/ChartCard";
import MiniArea from "../../components/chart/MiniArea";
import MiniBar from "../../components/chart/MiniBar";

import {countUser} from '@/services/user'
import {countAssets} from '@/services/assets'

export default {
  name: "Dashboard",
  i18n: require("./i18n"),
  data() {
    return {
      userTotal: "",
      assetTotal: "",
      loading: true,
    };
  },
  created() {
    setTimeout(() => (this.loading = !this.loading), 500);
  },
  mounted() {
    this.loadCost();
  },
  methods: {
    loadCost() {
      countUser().then((res) => {
        this.userTotal = res.data.count
      });
      countAssets().then((res) => {
        this.assetTotal = res.data.count
      })

    },
  },
  components: {
    PageLayout,
    MiniBar,
    MiniArea,
    ChartCard,
  },
};
</script>

<style lang="less" scoped>
.extra-wrap {
  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a:not(:first-child) {
      margin-left: 24px;
    }
  }
}

@media screen and (max-width: 992px) {
  .extra-wrap .extra-item {
    display: none;
  }
}

@media screen and (max-width: 576px) {
  .extra-wrap {
    display: none;
  }
}
</style>